<template>
    <div class="observerLibrary-increase">
        <!-- 新增弹窗 -->
        <a-modal
         :visible="visibleShow" 
         :title="addEditParameter.id?'编辑':'新增'" 
         @ok="handleOk" 
         :confirmLoading="confirmLoading"
         @cancel="visibleShow = false">
            <a-spin size="large" :spinning="spinning">
                <a-form v-if="visibleShow" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                    <a-form-item label="观察员姓名">
                        <a-input
                        placeholder="请输入观察员姓名"
                        v-decorator="[
                            'fgcyxm', { initialValue:formState.fgcyxm, rules: rules.fgcyxm}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="单位名称">
                        <a-input
                        placeholder="请输入单位名称"
                        v-decorator="['fdwmc', { initialValue:formState.fdwmc, rules: rules.fdwmc}]" />
                    </a-form-item>
                    <a-form-item label="手机号">
                        
                        <a-input
                        placeholder="请输入手机号"
                        v-decorator="['fphone', { initialValue:formState.fphone, rules: rules.fphone}]"/>
                    </a-form-item>
                    <a-form-item label="邮件">
                        
                        <a-input
                        placeholder="请输入邮件"
                        v-decorator="['femail', { initialValue:formState.femail, rules: rules.femail}]"/>
                    </a-form-item>
                    <a-form-item label="所在地市">
                        <a-input
                        placeholder="请选择所在地市"
                        v-decorator="['fszds', { initialValue:formState.fszds, rules: rules.fszds}]"/>
                        <!-- <a-select
                            placeholder="请选择所在地市"
                            v-decorator="[
                            'fszds',{ initialValue:formState.fszds, rules: rules.fszds}]"
                            
                        >
                            <a-select-option :value="item.value" v-for="(item,index) in optionsArr">
                                {{item.label}}
                            </a-select-option>
                        </a-select> -->
                    </a-form-item>
                    <a-form-item label="序号">
                        <a-input-number id="inputNumber" v-model="formState.forder" :min="1" @change="forderChange" />
                    </a-form-item>
                </a-form>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import compSelector from '@/components/compSelector/compSelector'
import validator from '@/common/validator'
import {addServe, editServe,ocalityPostAction} from './service/index'
export default {
    components:{
        compSelector
    },
    props:{
        addEditParameter:{
            type:Object,
            default:[]
        }
    },
    data(){
        return{
            spinning:true,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            visibleShow:false,
            confirmLoading:false,
            typeSelect:typeSelect,
            formState:{},
            rules:{
                fgcyxm: [{
                    required: true,
                    message: '请输入观察员姓名',
                    trigger: 'blur',
                }],
                fdwmc: [{
                    required: true,
                    message: '请输入单位名称',
                    trigger: 'blur',
                }],
                fphone: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号',
                    trigger: 'blur',
                }],
                fszds: [{
                    required: true,
                    message: '请选择所在地市',
                    trigger: 'blur',
                }],
                femail:[{
                    required: true,
                    message: '请输入邮箱',
                    trigger: 'blur',
                },{
                    pattern: validator.isEmail.reg,
                    message: '请输入正确的邮箱',
                    trigger: 'blur',
                }],
                resource: [{
                    required: true,
                    message: 'Please select activity resource',
                    trigger: 'change',
                }],
            },
            formRequer:'',
            optionsArr:[],
            submittedSuccessfully:false,
        }
    },
    watch:{
        addEditParameter(newval,oldVal){
            this.spinning = true
            //console.log('给了什么啊',newval)
            this.formState = {
                fdwmc:newval.fdwmc?newval.fdwmc:'',
                femail:newval.femail?newval.femail:'',
                fgcyxm:newval.fgcyxm?newval.fgcyxm:'',
                forder:newval.forder?Number(newval.forder):1,
                fphone:newval.fphone?newval.fphone:'',
                fszds:newval.fszds?newval.fszds:'南宁',
            }
            if(newval.id){
                this.formState.id = newval.id
            }
        }
    },
    mounted(){
        ocalityPostAction({dictName:'观察员所属地市'}).then(res=>{
            //console.log('字典的res',res)
            if(res.code == 200){
                if(res.result.length){
                    this.optionsDataChange(res.result,{label:'itemText',value:'itemValue'})
                }
                
            }
        })
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        optionsDataChange(dataList,dataType){
            var newOptionArr = []
            //标识每一项的下标，并且添加到每一项
            dataList.forEach((item,index) => {
                 
                //console.log(newOptionArr.filter(l=>l.itemIndex === index))
                if(!newOptionArr.filter(l=>l.itemIndex === index).length){
                    newOptionArr.push({...item,itemIndex:index})
                }
            });
            //console.log('这是有下标的数组',newOptionArr)
            for (let i = 0; i <= newOptionArr.length; i++) {//打印的item为数组中的每一个对象
                let item = newOptionArr[i]
                let index = i
                for (let key in item) { //遍历数组中的对象
                    var currentItem = {}
                    if(index === item.itemIndex){
                        currentItem = {
                            label:item[dataType.label],
                            value:item[dataType.value]
                        }
                        
                        if(!this.optionsArr.filter(l=>l.label === currentItem.label).length && currentItem.label){
                            this.optionsArr.push(currentItem)
                        }
                    }
                    

                }
            }
            //console.log('当前获取到的optionArr',this.optionsArr)
        },
        forderChange(val){
            //console.log(val)
            if(!val){
                this.formState.forder = 1
            }
        },
        handleSubmit(e) {
            // e.preventDefault();
            var formState = {}
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true
                    formState = {
                        ...this.formState,
                        ...values
                    }
                    if(formState.id){
                        editServe(formState).then(res=>{
                            if(res.code == 200){
                                this.submittedSuccessfully = true
                                this.$message.success('修改成功')
                                this.confirmLoading = false
                                this.visibleShow = false
                                this.$emit('handleOk',true,this.formState.id)
                            }else{
                                this.$message.warning(res.message)
                                this.confirmLoading = false
                            }
                        })
                    }else{
                        addServe(formState).then(res=>{
                            if(res.code == 200){
                                this.$message.success('添加成功')
                                
                                this.submittedSuccessfully = true
                                this.confirmLoading = false
                                this.visibleShow = false
                                this.$emit('handleOk',true,'')
                            }else{
                                this.$message.warning(res.message)
                                this.confirmLoading = false
                            }
                        })
                    }
                    
                }
            });
            
        },
        handleOk(){
            
            this.handleSubmit()
        }
    }

}

</script>
<style>
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
</style>